import React from 'react'
import { connect } from 'react-redux'
import { decrementActionCreator, incrementActionCreator } from './actions/counter'

function App(props) {
  return (
    <div>
      { props.count }

      <button onClick={props.plus}>加数量</button>
      <button onClick={props.minus}>减数量</button>
    </div>
  )
}

/**
 * 将 store 中 state 的数据映射到组件的属性中
 * mapStateToProps 是一个函数，会传递 store 中的 state 作为参数。
 * 返回一个普通对象，该对象会被合并到组件的 props 中
 * @param {*} state 
 * @returns 
 */
const mapStateToProps = state => ({
  count: state.counter.count
})

/**
 * 将更新状态数据的动作映射到组件的属性中
 * mapDispatchToProps 是一个函数，会传递 dispatch 作为参数。
 * 返回一个对象，返回对象中的各字段应该是函数（方法），返回
 * 对象中的各字段也会被合并到组件的 props 中。
 */
const mapDispatchToProps = dispatch => ({
  plus: () => dispatch(incrementActionCreator()),
  minus: () => dispatch(decrementActionCreator()),
})

/* 调用 connect() 函数，在 React 组件中，连接 redux 的 store */
const hoc = connect(mapStateToProps, mapDispatchToProps)

export default hoc(App)
